<template>
	<view class="qiun-columns">
		<view class="example-title qiun-common-mt">
			<view class="qiun-title-dot-light">健康数据</view>
			<view class="uni-right">
			<view class="uni-hello-addfile" @click="chooseImage2">上传小米截图</view>
			</view>
		</view>
		<view class="qiun-charts-rotate">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-rotate" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
			 disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-rotate" disable-scroll=true @touchstart="touchLineA"
			 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
			<!--#endif-->
		</view>
	</view>
</template>
<script>
	import uCharts from '../../components/u-charts/u-charts.js';
    import commonOnLoad from '../../common/common_on_load.js'; 
	import {
		mapState,
		mapGetters
	} from 'vuex'
	var canvaLineA = null;
	var _self;
	
	export default {
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin']),
		},
		data() {
			return {
				showImg: false,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
			}
		},
		onLoad(options) {
			_self = this;
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(1000);
			commonOnLoad.commonOnLoad(this.$mRoutesConfig.main,options,options.referenceId);//options.referenceId
			setTimeout(() => {
				this.showImg = true;
				// #ifdef H5  
				if (this.$wechat && this.$wechat.isWechat()) {  
					var url = this.$mConfig.baseUrl + "/api/shorturl/" + this.$mConfig.mpAppId + "/index";
					if(this.$store.getters.hasLogin){
						url = url + "?referenceId=" + this.$store.state.userInfo.id;
					}
					 this.$wechat.share({  
						  desc: this.$mConfig.descTxt,  
						  img: this.$mConfig.logoImgUrl,  
						  title:this.$mConfig.loginTitleTxt,  
					},url);  
				}  
				// #endif  
			}, 1000);
			this.init();
			// #ifdef MP
			if (!this.$store.getters.hasLogin ) {
				this.$store.commit("SET_IS_SILENT_LOGIN", true);
				this.silentLogin();
			}
			// #endif
		},
		methods: {
			chooseImage: async function() {
				uni.chooseImage({
					sourceType: 'album',
					sizeType: 'compressed',
					count: 1,
					success: (res) => {
						console.log(res.tempFilePaths);
					}
				})
			},
			async init(){
				let LineA = {
					categories: [],  //时间
					series: [{
							"name": "体重",
							"data": []
						}, {
							"name": "体脂",
							"data": []
						}, {
							"name": "水分",
							"data": []
						}]
				};
				
				var query = {
				};
				let data = await this.$apis.healthDataUrl(query);
				data.list.forEach(item => {
					LineA.categories.push(item.createDate);
					LineA.series[0].data.push(item.weight.toFixed(2));
					LineA.series[1].data.push((item.weight*item.bodyfat/100).toFixed(2));
					LineA.series[2].data.push((item.weight*item.bodyWater/100).toFixed(2));
				});
				console.log(JSON.stringify(LineA));
				
				this.showLineA('canvasLineA',LineA);
			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					rotate: true, //开启图表横屏
					// #ifdef MP-ALIPAY
					rotateLock: true, //百度及支付宝需要锁定旋转
					// #endif
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 0,
						max: 180,
						format: (val) => {
							return val.toFixed(0) + ''
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
				});
			},
			chooseImage2: function() {
				let token = this.$store.state.token;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						uni.uploadFile({
							url: this.$mConfig.baseUrl + '/api/health/upload',
							filePath: imageSrc,
							fileType: 'image',
							name: 'file',
							header: {
								"X-Nideshop-Token":token,
							},
							success: (res) => {
								console.log('uploadImage success, res is:', res)
								this.init();
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								})
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}
	
	.qiun-padding {
		padding: 2%;
		width: 96%;
	}
	
	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}
	
	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}
	
	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}
	
	.qiun-common-mt {
		margin-top: 10upx;
	}
	
	.qiun-bg-white {
		background: #FFFFFF;
	}
	
	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}
	
	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}
	
	/* 通用样式 */
	.qiun-charts {
		width: 750upx;
		height: 1100upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 700upx;
		height: 1000upx;
		background-color: #FFFFFF;
	}
	
	/* 横屏样式 */
	.qiun-charts-rotate {
		width: 700upx;
		height: 1000upx;
		background-color: #FFFFFF;
		padding: 25upx;
	}
	
	.charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
	}
	
	/* 圆弧进度样式 */
	.qiun-charts3 {
		width: 750upx;
		height: 250upx;
		background-color: #FFFFFF;
		position: relative;
	}
	
	.charts3 {
		position: absolute;
		width: 250upx;
		height: 250upx;
		background-color: #FFFFFF;
	}
	
	.qiun-tip {
		display: block;
		width: auto;
		overflow: hidden;
		padding: 15upx;
		height: 30upx;
		line-height: 30upx;
		margin: 10upx;
		background: #ff9933;
		font-size: 30upx;
		border-radius: 8upx;
		justify-content: center;
		text-align: center;
		border: 1px solid #dc7004;
		color: #FFFFFF;
	}
	.example-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #464e52;
		padding: 30upx;
		margin-top: 20upx;
		position: relative;
		background-color: #fdfdfd
	}
</style>
